<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>

     *{
      margin: 0;
      padding: 0;
    }

    .container{
     width: 800px;
     margin: 200px auto; 
    }

    /* 奔跑的北极熊 */

    .white-bear{
      width: 200px;
      height: 100px;
      overflow: hidden;
     position: relative; 
     background: rgb(185, 189, 190);
     /* animation: white-bear 2s ease 0.5s infinite alternate; */
    }

    .white-bear img{
      position: absolute;
      animation: white-bear 1s steps(8, end) 1s infinite normal;

    }

    @keyframes white-bear{
      0%{
        left: 0px;
      }

      

      100%{
        left:-1600px;
      }

    }

    
    .foot .cat-foot{
      width: 582px;
      height: 120px;
      overflow: hidden;
      animation: cat-foot 3s steps(1, start) 1s infinite normal;
    }

    @keyframes cat-foot {
            0% {
                width: 0px;
            }

            10% {
                width: 97px;
            }

            20% {
                width: 194px;
            }

            40% {
                width: 291px;
            }

            60% {
                width: 388px;
            }

            80% {
                width: 485px;
            }

            100% {
                width: 582px;
            }

        }


    @keyframes loading {
      0% {
        height: 0;
      }

      100% {
        height: 200px;
      }
    }
    @keyframes loadingN {
      0% {
        content: '0%';
      }

      10% {
        content: '10%';
      }

      20% {
        content: '20%';
      }

      30% {
        content: '30%';
      }

      40% {
        content: '40%';
      }

      50% {
        content: '50%';
      }

      60% {
        content: '60%';
      }

      70% {
        content: '70%';
      }

      80% {
        content: '80%';
      }

      90% {
        content: '90%';
      }

      100% {
        content: '100%';
      }
    }
    .box{
      width: 200px;
      height: 200px;
      background: rgb(115, 201, 196);
      position: relative;
      margin: 0 auto;
    }

    .logo{
      width: 200px;
      height: 200px;
      border-radius: 50%;
      margin: 0 auto;
      border: 30px solid #fff;
      box-sizing: border-box;
      position: absolute;
      overflow: hidden;
      top: 0;
      left:0;
      /* transform: translate(-50% -50%); */

    }
    .logo-moving{
      width: 100%;
      background: #e96b4a;
      animation: loading 10s linear 0s infinite;
      bottom: 0;
      left: 0;
      position: absolute;
    }

    .logo::after {
      content: '0%';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 24px;
      color: #fff;
      text-align: center;
      line-height: 100px;
      animation: loadingN 10s linear 0s infinite;
      z-index: 6;
        }


  </style>
</head>
<body>
  <div class="container">
    <!-- 奔跑的北极熊 -->
    <div class="white-bear">
      <img src="https://gitee.com/rawait/rwpicgo/raw/master/teaching/2021-12-22/202112220747264.png" alt="">
    </div>

    <!-- 猫猫脚印 -->
    <div class="foot">
      <div class="cat-foot">
        <img src="https://gitee.com/rawait/rwpicgo/raw/master/teaching/2021-12/202112171730761.png" alt="">
      </div>
    </div>

    <!-- logo -->
    <div class="box">
      <div class="logo">
        <div class="logo-moving"></div>
      </div>
    </div>
  </div>
</body>
</html>